<template>
  <div class="mobileService">
	   <div class="logoBg"><img src="~@/assets/images/common/fiveG.png"></div>
       <div class="heading">移动业务：<span class="redTitle">移动业务发展情况</span></div>
       <div class="content clearfix">
         <div class="contentLeft">
         <div class="contentflex">
           <div class="growthRate">
             <div class="marg weightFont buleBg"><span class="fl">01</span><span>移动新增</span></div>
             <div class="marg"><span class="normalFont">{{areaName}}累计新增{{newIncreaseData.totalIncrease}}万户</span></div>
             <div class="marg"><span class="normalFont">同比{{newIncreaseData.IncreaseYearOnYear}}</span></div>
             <div class="marg"><span class="normalFont">年度新增完成率{{newIncreaseData.newIncreaseFinishRate}}%</span></div>
           </div>
           <div class="growthRate">
             <div class="marg weightFont redBg"><span class="fl">02</span><span >移动净增</span></div>
             <div class="marg"><span class="normalFont">{{areaName}}累计净增{{netGrowthData.netGrowthTotalIncrease}}万户</span></div>
             <div class="marg"><span class="normalFont">年度净增完成率{{netGrowthData.netGrowthFinishRate}}%</span></div>
           </div>
         <!--  <div class="growthRate ">
             <div class="marg weightFont grayBg"><span class="fl">03</span><span >高价值套餐占比</span></div>
             <div class="marg"><span class="normalFont">全省累计新增38.5万户</span></div>
           </div> -->

          </div>
         </div>
         <div class="echartBox">
           <div class="contentRight" style="width: 445px;flex-shrink: 0">
           <div class="topEchart">
             <div class="contentTitle">移动月新增趋势</div>
             <newTrend  :newIncreaseTrendData="newIncreaseTrendData"></newTrend>
           </div>
           <div class="centerEchart">
             <div class="contentTitle">移动月净增趋势</div>
             <netIncreaseTrend :newGrowthTrendData='newGrowthTrendData'></netIncreaseTrend>
           </div>
         </div>
           <div class="contentRight"  style="flex:1">
           <div class="topEchart">
             <div class="contentTitle"></div>
             <addCity :addCityEchart='addCityEchart' :time="year"></addCity>
             <div>
             <div class="lackData">
                <span class="title">新增</span>
                <ul class="gapOfTitle" ref="addCity">
                  <li v-for="(item,index) in addEchartData" :key="index" :style="{'width':widthChange+'px'}">{{item}}</li>
                </ul>
             </div>
           </div>
           </div>
           <div class="centerEchart">
             <div class="contentTitle"></div>
             <netGrowth :netGrowthEchart="netGrowthEchart"></netGrowth>
             <div style="margin-top:10px">
               <div class="lackData">
                  <span class="title">净增</span>
                  <ul class="gapOfTitle" ref="netGrow">
                    <li v-for="(item,index) in netGrowthliData" :key="index" :style="{'width':widthChange1+'px'}">{{item}}</li>
                  </ul>
               </div>
             </div>
           </div>
          <!-- <div class="bottomEchart">
             <div class="contentTitle"></div>
             <development :developmentEchart="developmentEchart"></development>
           </div> -->
         </div>
         </div>
     </div>
  </div>
</template>

<script>
  import newTrend from "@/views/budget/showPdf/showEchart/newTrend";
  import netIncreaseTrend from "@/views/budget/showPdf/showEchart/netIncreaseTrend";
  import addCity from "@/views/budget/showPdf/showEchart/addCity";
  import netGrowth from "@/views/budget/showPdf/showEchart/netGrowth";
  // import development from "@/views/budget/showPdf/showEchart/development";
  import { getSessionStorage } from "@/common/js/storage";
  import { $budgetAPI } from "@/api";
    export default {
        name: "branchIncome",
        components:{
          addCity,
          netGrowth,
          newTrend,
          netIncreaseTrend,
          // development,
        },
         props: ["areaId", "month"],
        data(){
          return{
            newIncreaseData:{},
            netGrowthData:{},
            addCityEchart:{},
            netGrowthEchart:{},
            developmentEchart:{},
            addEchartData:[],
            netGrowthliData:[],
            widthChange:'',
            widthChange1:'',
            areaName:'',
            newIncreaseTrendData:{},
            newGrowthTrendData:{},
            newIncreaseLength:0,
            newGrowthDataListLength:0,
            year: '',
          }
        },
        mounted() {

         },
      methods:{
        getMobileServiceData(){
          var that = this
          $budgetAPI.getMobileServiceData(
          {areaId:this.areaId,
            accMonth:this.month},
          res => {
            if(res && res.code == 0 ){
             that.newIncreaseData = res.content.newIncreaseData
             that.netGrowthData = res.content.netGrowthData
              that.areaName = res.content.area.areaName
              that.year = res.content.accMonth.substring(0, 4)

              let netObj={
                xAxis: [],
                yAxis: [],
              }
              res.content.newIncreaseData.newIncreaseTrendData.map((item,index) =>{
                netObj.xAxis[index] =item.month.substring(4,5)>0?item.month.substring(4,6)+'月':item.month.substring(5,6)+'月'
                netObj.yAxis[index] = item.data
              })
              that.newIncreaseLength = res.content.newIncreaseData.newIncreaseTrendData.length>5?res.content.newIncreaseData.newIncreaseTrendData.length:5
              that.newIncreaseTrendData = netObj
              let newGrowthObj={
                xAxis: [],
                yAxis: [],
              }
              res.content.netGrowthData.newGrowthTrendData.map((item,index) =>{
                newGrowthObj.xAxis[index] = item.month.substring(4,5)>0?item.month.substring(4,6)+'月':item.month.substring(5,6)+'月'
                newGrowthObj.yAxis[index] = item.data
              })
              that.newGrowthTrendData = newGrowthObj
             let obj={
              xAxis: [],
              yAxis: [],
              y1Axis:[],
             };
             res.content.newIncreaseData.newIncreaseDataList.map((item,index) =>{
               obj.xAxis[index] = item.areaName
               obj.yAxis[index] = item.finishRate
               obj.y1Axis[index] = item.yearOnYear
               that.addEchartData[index] = item.data
             })
             that.addCityEchart = obj
             let obj1={
              xAxis: [],
              yAxis: [],
             };
             that.newGrowthDataListLength = res.content.netGrowthData.newGrowthDataList.length
             // res.content.netGrowthData.newGrowthDataList.sort((a,b) =>{
             //   return b.finishRate-a.finishRate
             // })
             res.content.netGrowthData.newGrowthDataList.map((item,index) =>{
               obj1.xAxis[index] = item.areaName
               that.netGrowthliData[index] = item.data
               obj1.yAxis[index] = item.finishRate
             })
             that.netGrowthEchart = obj1
            }
              this.$nextTick(function () {
                     this.width()
                    })

          },
           err => {}
           )
        },
        width(){
           this.widthChange = (this.$refs.addCity.clientWidth-1)/this.addEchartData.length;
           this.widthChange1 = (this.$refs.netGrow.clientWidth-1)/this.netGrowthliData.length;
         },
        },
    }
</script>

<style lang="scss" scoped>
.mobileService{
   padding: 20px;
   border:1px solid #dee5f3;
   border-radius:5px;
   margin-top: 20px;
   position:relative;
   .logoBg{
     position: absolute;
     right:20px;
     top:20px;
   }
   .heading{
     font-size: 22px;
     font-weight: 700;
     text-align: center;
     padding-bottom: 40px;
     .redTitle{
       color:#c00000
     }
   }
   .content{
     display: flex;
     .content.clearfix:after,content:before{
       content: "";
       display: table;
     }
     .content.clearfix:after{
       clear: both;
     }
     .content.clearfix{
       *zoom: 1;
     }
     .contentLeft{
       // width: 20%;
       // display: inline-block;
       width: 250px;
       flex-shrink: 0;
       .contentflex{
         display:flex;
         flex-direction:column;
         height: 100%;
         .growthRate{
           margin-bottom: 40px;
           width: 100%;
           height: 200px;
           .marg{
             margin-bottom: 10px;
             width: 100%;
             .normalFont{
               font-size: 16px;
             }
             .normalBuleFont{
               font-size: 16px;
               color:#5585bf;
             }
             .normalRedFont{
               font-size: 16px;
               color:#c00000;
             }
             .weightRedlFont{
               font-size: 16px;
               color:#c00000;
               font-weight: 700;
             }
           }
           .weightFont{
             font-size: 16px;
             font-weight: 700;
             color:#fff;
             width: 100%;
             text-align: center;
             padding: 5px;
             border-top-left-radius: 10px;
             border-top-right-radius: 10px;
             .fl{
               float:left;
             }
             &.buleBg{
               background:rgb(79,128,188);
             }
             &.redBg{
               background: #c00000;
             }
             &.grayBg{
               background:rgb(155,186,88);
             }
           }
         }
       }

     }
     .echartBox{
        // width: 77%;
        display: flex;
        flex:8;
        // display: inline-block;
        // float: right;
      .contentRight{
         display: flex;
         flex-direction: column;
         &:first-child{
          margin:0 10px;
          .topEchart{
            &:before{
              content:"";
              position:absolute;
              left:15%;
              top:-2px;
              width:70%;
              height:2px;
              background-color:#fff
            }
          }
          .centerEchart{
            &:before{
              content:"";
              position:absolute;
              left:25%;
              top:-2px;
              width:70%;
              height:2px;
              background-color:#fff
            }
          }
         }
       .topEchart{
           width: 100%;
           position: relative;
           border:1px solid #e5e5e5;
           border-radius: 10px;
           padding: 20px 0;
           flex:1;
       }
       .centerEchart{
           width: 100%;
           position: relative;
           border:1px solid #e5e5e5;
           border-radius: 10px;
           padding: 20px 0;
           flex:1;
            // height: 200px;
           margin:20px 0;

       }
       .bottomEchart{
           width: 100%;
           position: relative;
           border:1px solid #e5e5e5;
           border-radius: 10px;
           padding: 10px 0;
           display: inline-block;
            height: 200px;
            margin-bottom: 1%;
           &:before{
             content:"";
             position:absolute;
             left:15%;
             top:-2px;
             width:70%;
             height:2px;
             background-color:#fff
           }
       }
       .contentTitle{
           position: absolute;
           left: 50%;
           top: -14px;
           transform: translateX(-50%);
           font-size: 18px;
           font-weight: 700;
           text-align: center;
           width:60%;

           .redTitle{
             color:#e46c11;
           }
        }
        .lackData{
           padding: 0 20px 0 60px;
          .title{
            width: 51px;
            display: inline-block;
            vertical-align: top;
            float: left;
            margin-left: -55px;
            text-align: center;
          }
          .gapOfTitle{
             display: inline-block;
              width: 100%;
               li{
                 float:left;
                 border:1px solid #5585bf;
                 color:#5585bf;
                 text-align: center;
                 height: 18px;
                 line-height: 18px;
               }

          }

        }
     }
    }
   }
}
</style>
